<template>
  <div>
    <div class="drawTitle">
      <div style="display: flex;justify-content: flex-start">
        <div style="background:#6b6d71;width: 26px;height: auto;border-radius: 2px;padding: 2px;">
          <Icon :icon="mysqlForm.connectIcon" style="font-size:24px;color:#FFFFFF; "/>
        </div>
        <div style="margin-left:5px">{{ `${mysqlForm.id ? '编辑连接' : '新建连接'}` }}({{ mysqlForm.connectName }})</div>
      </div>
    </div>
    <div style="padding: 5px 10px">
      <el-form ref="mysqlConnectRef" :model="mysqlForm" :rules="rules" label-width="auto" label-position="left"
               size="small">
        <el-form-item label="连接名称:" prop="name">
          <el-input v-model="mysqlForm.name"/>
        </el-form-item>
        <el-form-item label="主机:" prop="host">
          <el-input v-model="mysqlForm.host"/>
        </el-form-item>
        <el-form-item label="端口:" prop="port">
          <el-input-number v-model="mysqlForm.port" :min="1" :controls="false" :input-style="{'text-align': 'left'}"/>
        </el-form-item>
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="mysqlForm.username" style="width: 220px"/>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input type="password" v-model="mysqlForm.password" show-password style="width: 220px"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-button-box">
      <div class="test-button">
        <el-button type="success" @click="pingConnect">测试连接</el-button>
      </div>
      <div class="operate-button">
        <el-button type="primary" plain @click="closeView">取消</el-button>
        <el-button type="primary" @click="saveMysqlConnect">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="MysqlConnections">
const props = defineProps({
  mysqlConnect: {
    type: Object,
    default: {}
  }
})
const {proxy} = getCurrentInstance();
const {mysqlConnect} = toRefs(props)
const formData = reactive({
  mysqlForm: {},
  rules: {
    name: [
      {required: true, message: "连接名不能为空", trigger: "blur"}
    ],
    host: [
      {required: true, message: "主机不能为空", trigger: "blur"}
    ],
    port: [
      {required: true, message: "端口不能为空", trigger: "blur"}
    ],
    username: [
      {required: true, message: "用户名不能为空", trigger: "blur"}
    ],
    password: [
      {required: true, message: "密码不能为空", trigger: "blur"}
    ]
  }
})
const {mysqlForm, rules} = toRefs(formData)

function initFormValue() {
  mysqlForm.value = mysqlConnect.value
  if (!mysqlForm.value.id) {
    mysqlForm.value.host = 'localhost';
    mysqlForm.value.port = 3306;
    mysqlForm.value.username = 'root';
    mysqlForm.value.password = null;
  }
}

function saveMysqlConnect() {
  proxy.$refs["mysqlConnectRef"].validate(valid => {
    if (valid) {
      if (mysqlForm.value.id) {
        proxy.$userIpc.invoke(proxy.$ipcRouters.connectManage.editConnect, mysqlForm.value).then(res => {
          closeView()
        })
      } else {
        proxy.$userIpc.invoke(proxy.$ipcRouters.connectManage.addConnect, mysqlForm.value).then(res => {
          closeView()
        })
      }
    }
  });
}

function pingConnect() {
  proxy.$refs["mysqlConnectRef"].validate(valid => {
    if (valid) {
      proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.pingConnect, mysqlForm.value).then(res => {
        if (res.code != 200) {
          proxy.$modal.alertError(res.message);
        } else {
          proxy.$modal.alert(res.message);
        }
      })
    }
  });
}

function closeView() {
  proxy.$emit('closeMysqlView', false)
}

initFormValue()
</script>

<style scoped lang="scss">
.bottom-button-box {
  height: 32px;
  display: flex;
  justify-content: space-between;
}
.test-button {
  width: 60%;
  height: 32px;
  display: flex;
  justify-content: flex-start;
  padding: 0 10px;
}
.operate-button {
  width: 38%;
  height: 32px;
}
:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
:deep(.el-input-number.is-without-controls .el-input__wrapper) {
  padding-left: 5px;
}
</style>
